<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="../../css/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="../css/common.css" media="all">
    <style type="text/css">
        .ver1 {
            height: 80px;
            border: 1px solid #000;
            display: table-cell;
            vertical-align: middle;
            *display: block;
            *font-size: 70px;
        }

        .ver1 input,
        .ver1 button {
            font-size: 12px;
            vertical-align: middle;
        }

            /*=================ver2 ===================*/
        .ver2 {
            border: 1px solid #000;
            line-height: 50px;
        }

        .ver2 label {
            /*ie7 has -3px bug when label+input:checkbox*/
            *margin-left: -3px;
        }

            /*=================ver3 ===================*/
        .ver3 {
            height: 220px;
            padding: 13px 0;
            border: 1px solid #000;

        }


    </style>
</head>
<body>
<div class="wrap2 m10a tsG">
    <div class="p10">
        <h2 class="title">Input+button的垂直居中</h2>

        <div class="fz114 ver1">
            <input type="text" name="" id="">
            <button>TestButton</button>
        </div>
        <p class="blank10"></p>

        <h2 class="title">checkbox+label的垂直居</h2>
        <span class="description">
            利用lineHeight+vm_即可
        </span>

        <div class="ver2 vm_">
            <input type="checkbox" name="" id=""><label for="">Test Label</label>
        </div>

        <h3>大段的文本垂直居中</h3>

        <div class="ver3" id="box">
            <i class="fix"></i><img class="img" src="../images/mm1.jpg" alt=""/>
        </div>

        <style type="text/css">

        .ver3 .fix {
            /*可考虑用 zero width character*/
            display: inline-block;
            height: 100%;
            vertical-align: middle
        }

        .ver3 .img {
            border: 1px solid #000;
            display: inline-block;
            vertical-align: middle
        }
        </style>


        <div class="ver3">
            <i class="fix"></i>
            <span class="img bd">
                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>
            </span>

            <span class="img bd">
                <p>A lot of text content....</p>
                <p>A lot of text content....</p>
            </span>
        </div>
        <style type="text/css">
            .ver4{
                border: 1px solid #000;
                height: 200px;
                *font-size: 175px;
            }
            .ver4 .bd{
                vertical-align: middle;
                display: inline-block;
                border: 1px solid #000;
                font-size: 12px;
            }
        </style>
        <div class="ver4">
            <span class="bd">
                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>

                <p>A lot of text content....</p>
            </span>
        </div>


    </div>
</div>
</body>
</html>